<template>
	<view class="content-img">
		<eui-nav-bar title="公文" color="#000" rightIcon="" />
		<eui-search-bar ref="approveSearch" v-model="searchValue" @confirm="selStoreById" radius="100"
			placeholder="搜索标题" showFilter>
			<template #searchFields>
				<view class="search-fields">
					<view class="center">
						<!-- <eui-card-input v-model="selectTime" :modelValue="selectTime" title="日期" :range="timeList"
							type="radio" alignType="left" @buttonClick="buttonClickTime" />
						<view class="flex date-defined" v-if="selectTime=='自定义'">
							<view class="flex-1"><eui-datetime-picker type="day" v-model="StartDt"
									placeholder="开始日期"></eui-datetime-picker></view>
							<view>-</view>
							<view class="flex-1"><eui-datetime-picker type="day" v-model="EndDt"
									placeholder="结束日期"></eui-datetime-picker></view>
						</view> -->
						<DateCard v-model="selectTime" :modelValue="selectTime" title="日期" type="date" :range="timeList"
							@buttonClick="buttonClickTime"></DateCard>
					</view>
					<view class="bottom flex-1 flex">
						<view class="flex-1 flex" style="padding-right: 7.5px;" @click="CancelCondition">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
								style="border: solid 1rpx rgba(136, 136, 136, 1);font-size: 15px;">重置</view>
						</view>
						<view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
							@click="ConfirmCondition">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg button-theme" :class="[theme]"
								style="color: #fff;font-size: 15px;">
								确认</view>
						</view>
						<!-- <eui-button type="max2" title="重置" @click="CancelCondition"></eui-button>
						<eui-button type="max" title="确认" @click="ConfirmCondition"></eui-button> -->
					</view>
				</view>
			</template>
		</eui-search-bar>
	</view>
    <view class="main-view">
		<scroll-view scroll-y lower-threshold='88' @refresherrefresh="onRefresh" @scrolltolower="templateLower"
			:refresher-enabled='true' :refresher-triggered="triggered" :style="{width:scrollWidth,height:scrollHeight}">
			<DocList :data="dataList" @change="onRefresh"></DocList>
			<view v-if="dataList.length == 0" class="no-data flex flex-direction-column" style="background-color: RGBA(255,255,255,0);">
				<image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
				<view class="color-888 font-size-28">暂无数据</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup type="ts">
	import { ref } from 'vue';
	import { onLoad,onReady, onShow } from '@dcloudio/uni-app';
	import service from '@/common/service';
	import Enjoy from '@/common/enjoy';
	import dateRangUtil from '@/common/dateRangUtil';
	import { storeToRefs } from 'pinia';
	import { useMainStore } from '@/store/modules/store';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import { useThemeStore } from '@/store/themeStore';
	import DateCard from "@/components/DateCard/index"
    import DocList from './DocList.vue';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20 + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');
	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight); 
	const searchValue = ref('');
	const triggered = ref(false);
	const CurrentPage = ref(1);
	const RowsCount = ref(0);
	const PageCount = ref(0);
	const dataList = ref([]);
	const PageSize = ref(10);
	const approveSearch = ref(null);
	const selectTime = ref('全部');
	const timeList = ref([{
		text: '全部',
		value: '全部',
		dateRang: ['', '']
	},{
		text: "今天",
		value: "今天",
		dateRang: dateRangUtil.getLastToday()
	},{
		text: "昨天",
		value: "昨天",
		dateRang: dateRangUtil.getYesterday()
	},{
		text: "本周",
		value: "本周",
		dateRang: dateRangUtil.getCurrentWeek()
	},{
		text: "上周",
		value: "上周",
		dateRang: dateRangUtil.getLastWeek()
	},{
		text: "近三天",
		value: "近三天",
		dateRang: dateRangUtil.getLast3Day()
	},{
		text: "本月",
		value: "本月",
		dateRang: dateRangUtil.getCurrentMonth()
	},{
		text: "上月",
		value: "上月",
		dateRang: dateRangUtil.getLastMonth()
	},{
		text: "自定义",
		value: "自定义",
		dateRang: "自定义"
	}]);
	const StartDt = ref('');
	const EndDt = ref('');
	const isTypeShow = ref(false);
	const onTapLeft = () =>{
		uni.navigateBack();
	}
	const selStoreById =()=>{
		onRefresh();
	}
	const buttonClickTime = (e)=>{
		if(e.modelType=='StartDt'){
			selectTime.value='自定义';
			StartDt.value = e.modelValue;
		}else if(e.modelType=='EndDt'){
			selectTime.value='自定义';
			EndDt.value = e.modelValue;
		}else{
			selectTime.value=e.modelType;
		}
	}
	const CancelCondition = () =>{
		selectTime.value = '全部';
		StartDt.value = '';
		EndDt.value = '';
	}
	const ConfirmCondition = () =>{
		if(selectTime.value=='自定义'){
			if(!StartDt.value||!EndDt.value){
				uni.showToast({
					duration: 3500,
					icon: 'none',
					title: '请选择开始日期、结束日期!',
				});
				return false;
			}
		}else{
			StartDt.value = '';
			EndDt.value = '';
		}
		approveSearch.value.closeDrawer();
		onRefresh();
	}
	// 下拉刷新
	const onRefresh = ()=>{
		if (triggered.value) {
			return false;
		};
		triggered.value = true;
		CurrentPage.value = 1;
		dataList.value = [];
		GetDocRecList();
		setTimeout(() => {
			triggered.value = false;
		}, 3000)
	}
	// 加载更多
	const templateLower = ()=>{
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			GetDocRecList();
		}
	}
	const setUserPic = e =>{
		let pic = '';
		const imgUrl = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
		pic = imgUrl + '/File/DownLoadImage/' + e;
		return pic
	}
	const GetDocRecList = () =>{
		console.log('时间'+dateRangUtil.getLastToday());
		service.enjoyShowLoading('正在加载...');
		let st = '';
		let en = '';
		if(selectTime.value=='自定义'){
			st = StartDt.value;
			en = EndDt.value;
		} else if (selectTime.value=='全部'){
			st = '2020-01-01';
			en = dateRangUtil.getLastToday().toString().split(',')[0];
		} else {
			let list = timeList.value.filter(item => item.value==selectTime.value);
			if(list.length>0){
				st = list[0].dateRang[0];
				en = selectTime.value=='上周'?list[0].dateRang[2]:list[0].dateRang[1];
			}
		}
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40企业新闻",
		        ObjectData: {
					userno:mainStore.loginInfo.sUser,
					IsNotPage: false,
					Sql:null,
					PageSize:PageSize.value,
					CurrentPage:CurrentPage.value,
					title:searchValue.value,
					sdt: st,
					edt:en
				},
		        MethodName: "GetDocRecList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					console.log("ObjectData: " + JSON.stringify(ObjectData));
					RowsCount.value = ObjectData.RowsCount;
					PageCount.value = ObjectData.PageCount;
					CurrentPage.value = ObjectData.CurrentPage;
					for (let i = 0; i < ObjectData.length; i++) {
						dataList.value.push({
							c_read_status:(ObjectData[i].c_status=='YV'?'已阅':'未阅'),
							...ObjectData[i],
							
						})
					}
					service.enjoyHideLoading();
					
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}	
	onReady(()=>{
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".content-img");
				userInfoPage.boundingClientRect(function(data) {
					scrollHeight.value = (res.windowHeight - data.height - 20)+'px';
				}).exec()
			}
		});
	})
	onLoad(()=>{
		
	})
	onShow(()=>{
		selectTime.value='本月';
		onRefresh();
	})
	
	// defineExpose({
	// 	onRefresh
	// })
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

	.content-img {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		width: 100%;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f2f2f2;
	}

	.approve-list {
		padding: 28rpx 0rpx 24rpx 0rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.font-size-26 {
		font-size: 26rpx;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.font-size-32 {
		font-size: 32rpx;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	.margin-top-16 {
		margin-top: 16rpx;
	}

	.margin-right-16 {
		margin-right: 16rpx;
	}

	.margin-bottom-20 {
		margin-bottom: 20rpx;
	}

	.padding-bottom-20 {
		padding-bottom: 20rpx;
	}

	.padding-left-28 {
		padding-left: 28rpx;
	}

	.padding-right-28 {
		padding-right: 28rpx;
	}

	.justify-content-space-between {
		justify-content: space-between;
	}

	.justify-content-flex-end {
		justify-content: flex-end;
	}

	.justify-content-center {
		justify-content: center;
	}

	.align-items-center {
		align-items: center !important;
	}

	.color-888 {
		color: rgba(136, 136, 136, 1);
	}

	.color-FF4000 {
		color: rgba(255, 64, 0, 1);
	}

	.color-02B7E6 {
		color: rgba(2, 183, 230, 1);
	}

	.border-bottom-eee {
		border-bottom: solid 1px rgba(238, 238, 238, 1);
	}

	.approve-mark {
		font-size: 26rpx;
		padding: 1px 7px;
		background-color: RGBA(242, 251, 254, 1);
		border-radius: 18px;
	}

	.search-fields {
		width: 100%;
		background: #FFFFFF;

		.center {
			padding-bottom: 22rpx;
		}

		.bottom {
			background: #ffffff;
			border-top: 1rpx solid $uni-line-color;
			display: flex;
			justify-content: center;
			padding: 20rpx;
		}
	}

	.date-defined {
		padding-left: 185rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		font-size: 14px;
	}

	.word-wrap-break-word {
		word-wrap: break-word;
	}

	.header-content {
		height: 88rpx;
		padding: 0 6px;
		background-color: #fff;
		align-items: center;
		position: relative;
		z-index: 2;
	}

	.email-option {
		position: fixed;
		background-color: rgb(255, 255, 255);
		z-index: 2;
		top: 44px;
		left: 0px;
		right: 0px;
		height: 88px;
	}

	.email-mask {
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.padding-left-28 {
		padding-left: 28rpx;
	}

	.padding-right-28 {
		padding-right: 28rpx;
	}

	.border-bottom-eee {
		border-bottom: solid 1px rgba(238, 238, 238, 1);
	}

	.iconfont {
		font-size: 20px;
		width: 40px;
		height: 100%;
		text-align: center;
		line-height: 37px;
		@include themeText("themeText");
	}

	.email-edit {
		width: 76rpx;
		height: 76rpx;
		background: linear-gradient(178deg, rgba(0, 197, 255, 1), rgba(54, 169, 243, 1));
		border-radius: 50%;
		position: fixed;
		bottom: 40rpx;
		right: 28rpx;
	}
	.bottom-bg {
		height: 40px;
		border-radius: 20px;
	}
	
	.button-theme {
		background: var(--theme-bgc-color);
	}
</style>